{{Template:SZPT-CHINA/head}}
<html>

<head>

</head>
<!-- jquery 公共CSS-->
<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>
<link rel="stylesheet" href="https://2021.igem.org/Team:SZPT-CHINA/CSS/Public?action=raw&amp;ctype=text/css">

<script>
    $(document).ready(function () {
        //隐藏住内容
        var loadImg = document.getElementById('downContent'); //选取id为test的元素
        loadImg.style.display = 'none'; // 隐藏选择的元素
        //加载适配
        init();
        //显示load
        var loadImg = document.getElementById('loadImg'); //选取id为test的元素
        loadImg.style.display = 'block'; // 隐藏选择的元素

    });


    //判断加载状态
    var loadhidekey = 0;
    window.onload = function () {
        console.log("页面加载好了", loadhidekey)
        setTimeout(function () {
            //滑到顶部
            document.body.scrollTop = document.documentElement.scrollTop = 0;
            loadhidekey = 1
            $("#directory").hide();
            $("#loadingHome").hide();
            //主内容显示
            var loadImg = document.getElementById('downContent');
            loadImg.style.display = 'block';
            //页面添加两个页面固定
            document.body.append(document.getElementById('directory'))
            document.body.append(document.getElementById('head'))
            // $("#loading").hide();
        }, 10);


    }

    function animateScroll(element, speed) {
        let rect = element.getBoundingClientRect();
        //获取元素相对窗口的top值，此处应加上窗口本身的偏移
        let top = window.pageYOffset + rect.top - 100;
        let currentTop = 0;
        let requestId;
        //采用requestAnimationFrame，平滑动画
        function step(timestamp) {
            currentTop += speed;
            if (currentTop <= top) {
                window.scrollTo(0, currentTop);
                requestId = window.requestAnimationFrame(step);
            } else {
                window.cancelAnimationFrame(requestId);
            }
        }
        window.requestAnimationFrame(step);
    }



    //设置展开
    $(document).ready(function () {

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
            // mobilePage();
            designHeight = 3100;
        } else {
            //pc
            designHeight = 980;
        }
        lateHeight = document.documentElement.clientHeight;
        heightRatio = lateHeight / designHeight
        console.log("height:", heightRatio)
        console.log('1')

        document.getElementById("dir1").onclick = function () {
            // window.scrollTo(0, 350*heightRatio/0.713265306122449);
            let target = document.getElementById('content1');
            animateScroll(target, 250);
            $("#directory").show();
        }
        document.getElementById("dir2").onclick = function () {
            //window.scrollTo(0, 3500 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content2');
            animateScroll(target, 250);
        }
        document.getElementById("dir3").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content3');
            animateScroll(target, 250);
        }


    });
    $(window).scroll(function () {

        if ($(this).scrollTop() > 270 * heightRatio / 0.713265306122449) {
            $("#directory").show();
        } else {
            $("#directory").hide();
        }

    });
</script>
<!-- jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {

        //设置默认


        var pNo = "height: 450px;width:450px;float: left;transition: all 0.3s;"
        var bgNo = "background-color: #f8c8b2;float: left;width: 25%;height: 480px;transition: all 0.3s;"
        var p = "height: 480px;width:480px;float: left;	transition: all 0.3s;"
        var bg = "background-color: #e2594f;float: left;width: 25%;height: 480px;transition: all 0.3s;"

        $("#p1").attr("style", pNo);
        $("#bg1").attr("style", bgNo);

        $("#p2").attr("style", pNo);
        $("#bg2").attr("style", bgNo);

        $("#p3").attr("style", pNo);
        $("#bg3").attr("style", bgNo);

        $("#p4").attr("style", p);
        $("#bg4").attr("style", bg);

        $("#m1").mouseover(
            function () {
                $("#p2").attr("style", pNo);
                $("#bg2").attr("style", bgNo);

                $("#p3").attr("style", pNo);
                $("#bg3").attr("style", bgNo);

                $("#p4").attr("style", pNo);
                $("#bg4").attr("style", bgNo);
                //1
                $("#p1").attr("style", p);
                $("#bg1").attr("style", bg);
            },

        ),
            $("#m2").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //2
                    $("#p2").attr("style", p);
                    $("#bg2").attr("style", bg);
                },
            ),
            $("#m3").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //3
                    $("#p3").attr("style", p);
                    $("#bg3").attr("style", bg);
                },
            ),
            $("#m4").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);
                    //4
                    $("#p4").attr("style", p);
                    $("#bg4").attr("style", bg);
                },
            )
        $("#m1").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Team";
        });
        $("#m2").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Attributions";
        });
        $("#m3").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Collaborations";
        });
        $("#m4").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Partnership";
        });

    });
</script>
<script>
    $(document).ready(function () {
        $("#dir1").hover(function () {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir1").attr("style", value);
        }, function () {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir1").attr("style", value);
        });

        $("#dir2").hover(function () {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir2").attr("style", value);
        }, function () {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir2").attr("style", value);
        });

        $("#dir3").hover(function () {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir3").attr("style", value);
        }, function () {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir3").attr("style", value);
        });



    });
</script>

<body class="pc" id="main" style="font-family: 'Quicksand', sans-serif;
font-size: inherit;">
    <!-- loading -->
    <div id="loadingHome"
        style=" position: fixed; left: 0px;top: -100px; width: 100%;height:115%;z-index: 999999999999;background-color: #f8c8b2;">
        <img id="loadImg"
            style=" position: relative; height: 2%;width: auto;left: 0%;margin:0px auto;top: 300px; text-align: center;display: none;"
            src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>
    <div id="downContent">
        <div class="mainImg">
            <div>
                <div id="bg1" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p1" src="https://2021.igem.org/wiki/images/f/f5/T--SZPT-CHINA--team-members2.0.png"
                        class="smallImg"></image>
                </div>
                <div id="bg2" style="background-color: #f8c8b2;float: left;width: 25%;">

                    <image id="p2" src="https://2021.igem.org/wiki/images/b/b2/T--SZPT-CHINA--team-attributions2.0.png"
                        class="smallImg"></image>

                </div>
                <div id="bg3" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p3"
                        src="https://2021.igem.org/wiki/images/b/bf/T--SZPT-CHINA--team-collaborations2.0.png"
                        class="smallImg"></image>
                </div>
                <div id="bg4" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p4" src="https://2021.igem.org/wiki/images/5/5a/T--SZPT-CHINA--team-partnership2.0.png"
                        class="smallImg"></image>
                </div>
            </div>
            <div style="z-index: 99;position: absolute;">
                <image src="https://2021.igem.org/wiki/images/9/94/T--SZPT-CHINA--team-partnership.png"
                    style="margin-top: -50px;margin-left: 499px;"> </image>
            </div>
            <div style="margin-top: 50px;">
                <div id="m1" style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;"></div>
                <div id="m2"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 480px;">
                </div>
                <div id="m3"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 960px;">
                </div>
                <div id="m4"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 1440px;">
                </div>
            </div>

        </div>

        <!-- down -->
        <div style="width: 1920px;background-color: #ffffff;">
            <div id="blue" style="float:left; height: 18500px; width: 55px;background-color: #2588d4;">
            </div>
            <div id="directory" style="float:left;margin-top: 8vh;z-index: 990;position: fixed;">
                <div
                    style="margin-top: 9vh;background-color: #dd544d;margin-left: 6vw;border-radius:10px;padding: 1vw;width: 16vw;">
                    <h3 id="dir0p" style="color:#fffea4;padding-left: 10%;font-size:1.8rem;">
                        Partnership</h3>
                    <div style="margin-left: 13%;">
                        <div id="dir1" style="color:#ffffff;width: auto;height: 6vh;margin-top: 3vh;">
                            <p id="dir1p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Overview
                            </p>
                        </div>
                        <div id="dir2" style="color:#ffffff;height:6vh;width: auto;">
                            <p id="dir2p" style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">
                                NWU-CHINA-A
                            </p>
                        </div>
                        <div id="dir3" style="color:#ffffff;width: auto;height: 8vh;">
                            <p id="dir3p"
                                style="font-size: 1.2rem;padding-top: 0vh;font-family: 'Quicksand', sans-serif;">
                                FAFU-CHINA</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content"
                style="float:left;width: 1173px;margin-left: 397px;margin-top: 100px;padding-left:100px;background-color: #ffffff;text-align: justify;">

                <div id="content1" class="yj">
                    ● Overview
                </div>

                <div class="pb">
                    In addition to the short-term collaboration relationship to improve our project, we also conducted a
                    long-term partnership with NWU-CHINA-A and FAFU-CHINA to improve our project in detail. Thank the
                    two
                    teams for their help in this year's competition.


                </div>

                <div id="content2" class="yj">
                    ● NWU-CHINA-A

                </div>
                <img src="https://2021.igem.org/wiki/images/8/80/T--SZPT-CHINA--partnership-pic-1.png"
                    style="margin-top: 70px;width: 1200px;margin-left: 0px;"></img>


                <div class="pb">
                    Based on last year's cooperation, we have also in-depth cooperation with NWU-CHINA-A this year. We
                    will have a preliminary exchange in June. Due to the impact of the COVID-19, our communication this
                    year
                    have been completed online.
                    <br>
                    <br>
                    We had our first online communication on July 16. During the conference, we plan to work together to
                    carry out lectures on synthetic biology and help each other correct the questionnaire. Finally, we
                    agreed to hold an online meeting once a week in the future and supervise the progress of the other
                    party's experiment.
                </div>
                <img src="https://2021.igem.org/wiki/images/6/60/T--SZPT-CHINA--partnership-pic-2.png"
                    style="margin-top: 70px;width: 700px;margin-left: 234px;"></img>
                <div class="tz">Figure 1. Firstly online communication with NWU-CHINA-A on July
                    16, 2021
                </div>



                <div class="pb">
                    On July 23, we communicated online as scheduled to report on the progress of each other’s
                    experiment. We
                    also discussed the prototype of the product and made some suggestions to each other, that is, later
                    <span style="font-weight: 900;">we
                        decided to make lyophilized bacterial powder and the NWU-CHINA-A also freeze-dried the product.
                        In
                        addition, we also had some discussions about hardware production.</span>
                </div>

                <img src="https://2021.igem.org/wiki/images/1/10/T--SZPT-CHINA--partnership-pic-3.png"
                    style="margin-top: 70px;width: 700px;margin-left: 234px;"></img>
                <div class="tz">Figure 2. Secondly online communication with NWU- CHINA -A on July
                    23, 2021
                </div>

                <div class="pb">
                    On July 26, Our team invited a <span style="font-weight: 900;">business expert </span>engaged in
                    business for good to give us an offline
                    lecture. And our team shared this offline lecture with our partners NWU-CHINA-A. This lecture made
                    our
                    team pay attention to how to benefit more people when conducting human social practice later.
                    <br>
                    <a href="https://2021.igem.org/Team:SZPT-CHINA/Inclusivity"> (Please
                        click inclusivity for details)</a>
                </div>


                <img src="https://2021.igem.org/wiki/images/b/b5/T--SZPT-CHINA--partnership-pic-4.png"
                    style="margin-top: 70px;width: 700px;margin-left: 234px;"></img>
                <div class="tz">Figure 3. Thirdly online communication with NWU-CHINA-A on July
                    26, 2021
                </div>

                <div class="pb">
                    On July 30，The fourth online communication reported the progress of each other's experiment as
                    usual,
                    and then discussed the problems encountered in the experiment together. NWU-CHINA-A asked: <span
                        style="font-weight: 900;">How to solve
                        the problem of incorrect gene sequencing?</span> Answer: Continuing with the following
                    functional
                    verification
                    experiments, the mutation of a base may not affect the function of the gene. And in the exchange, we
                    found that both parties were rejected by enterprises in the investigation, so we decided to help
                    each
                    other <span style="font-weight: 900;">find projects-related companies in their respective
                        regions.</span>
                </div>

                <img src="https://2021.igem.org/wiki/images/3/38/T--SZPT-CHINA--partnership-pic-5.png"
                    style="margin-top: 70px;width: 700px;margin-left: 234px;"></img>
                <div class="tz">Figure 4. Fourthly online communication with NWU-CHINA-A on
                    July30，2021
                </div>

                <div class="pb">
                    On August 2, NWU-CHINA-A <span style="font-weight: 900;">recommended Xi'an Donghai Live Bacteria
                        Brand
                        Promotion Co., Ltd. for us.</span> On
                    August 5, we held an online meeting with the company and learned about the issues related to the
                    product
                    development direction, and finally, we confirmed the idea of making live bacteria products. On the
                    same
                    day, we recommended the <span style="font-weight: 900;">Huaxing Ruihong Washing Plant for the
                        NWU-CHINA-A team. </span>The next day,
                    NWU-CHINA-A held an online meeting with the company to solve their project-related problems. On the
                    afternoon of the 6th, we will communicate with each other. First, we exchanged the progress of the
                    experiment; and then we invited NWU-CHINA-A to <span style="font-weight: 900;">dub our picture book
                        in
                        dialect.</span>
                </div>


                <img src="https://2021.igem.org/wiki/images/2/2a/T--SZPT-CHINA--partnership-pic-6.png"
                    style="margin-top: 70px;width: 700px;margin-left: 234px;"></img>
                <div class="tz">Figure 5. Fifthly online communication with NWU-CHINA-A on
                    August 2, 2021
                </div>

                <div class="pb">
                    On August 13, exchanged the progress of experiments，NWU-CHINA-A is <span
                        style="font-weight: 900;">invited to participate in the online
                        activity "Synthetic Biology in Life" hosted by us.</span> </div>

                <img src="https://2021.igem.org/wiki/images/5/58/T--SZPT-CHINA--partnership-pic-7.png"
                    style="margin-top: 70px;width: 700px;margin-left: 234px;"></img>
                <div class="tz">Figure 6. Sixthly online communication with NWU-CHINA-A on
                    August 13, 2021
                </div>

                <div class="pb">
                    On August 20, the long-term communication that we cooperate with each other tacit understanding,.
                    The
                    first step was to supervise the progress of the experiment. During this period, everyone's
                    experiments
                    were in full swing. In terms of human social practice, we have adjusted some details of Audio book-
                    Bacteria Warfare recording. <span style="font-weight: 900;">We also discussed the time of online
                        activities, how to promote the audience,
                        and other issues in detail.</span> </div>




                <img src="https://2021.igem.org/wiki/images/e/e9/T--SZPT-CHINA--partnership-pic-8.png"
                    style="margin-top: 70px;width: 700px;margin-left: 234px;"></img>
                <div class="tz">Figure 7. Seventhly online communication with NWU- CHINA-A on August
                    20, 2021
                </div>

                <div class="pb">
                    On September 4, September is the beginning of the school season. All students in China are returning
                    to
                    school or ready to back to school. Of course, we are no exception. Thus we changed the weekly
                    meeting to
                    Saturday. The meeting was the same experimental exchange as before, which <span
                        style="font-weight: 900;">mainly solved the problem of
                        gene expression</span> that our team encountered in the experiment. Then there is the live
                    broadcast
                    of
                    Northwestern University. Because of the live broadcast effect of the TJUSLS-CHINA team in the
                    previous
                    game, we decided to help NWU-CHINA-A to carry out some pre-publicity. In the follow-up live
                    broadcast,
                    the number of people in the live room increased from 1,000 in the previous live broadcast to more
                    than
                    1,500. </div>








                <img src="https://2021.igem.org/wiki/images/2/26/T--SZPT-CHINA--partnership-pic-9.png"
                    style="margin-top: 70px;width: 700px;margin-left: 234px;"></img>
                <div class="tz">Figure 8. Eighthly online communication with NWU-CHINA-A on
                    September 4, 2021
                </div>

                <div class="pb">
                    On September 11, the second week of school, our exchanges continued as usual. Towards the end of the
                    game, the content of our conversations tended to be summary. During the exchange this week, we
                    discussed freeze-drying experiments again, we solved each other’s problems, and we provided them
                    with our photopromoter gene The dyeing experiment of NWU-CHINA-A mainly focuses on traditional
                    fabrics, so we suggest that we can try to dye bacterial cellulose. Therefore, we are ready to carry
                    out the next stage of cooperation.
                </div>



                <img src="https://2021.igem.org/wiki/images/f/f3/T--SZPT-CHINA--partnership-pic-10.png"
                    style="margin-top: 70px;width: 700px;margin-left: 234px;"></img>
                <p style="text-align: center;font-size:150%;">Figure 9. Ninethly online communication with NWU- CHINA-A
                    on
                    September 11, 2021
                </p>

                <div class="pb">
                    On September 19, the second exchange after school started, and it was also our 10th exchange. We
                    further discussed the issue of bacterial cellulose dyeing, But due to biosafety restrictions, they
                    finally gave up this idea, as well as the preparation of Wiki content. but we will continue to
                    cooperate in the future if conditions permit.
                </div>


                <img src="https://2021.igem.org/wiki/images/f/f2/T--SZPT-CHINA--partnership-pic-11.png"
                    style="margin-top: 70px;width: 700px;margin-left: 234px;"></img>
                <div class="tz">Figure 10. Tenthly online communication with NWU- CHINA-A on
                    September 19, 2021
                </div>

                <div class="pb">
                    Through online communication, we timely understand and solve the experimental problems of both
                    parties
                    and share human practical experience in different stages of communication.</div>



                <div id="content3" class="yj">
                    ● FAFU-CHINA

                </div>
                <img src="https://2021.igem.org/wiki/images/e/ef/T--SZPT-CHINA--partnership-pic-12.png"
                    style="margin-top: 70px;width: 1200px;margin-left: 0px;"></img>


                <div class="pb">
                    At the beginning of 2021, we met the FAFU-CHINA team. We established a partnership this year, and we
                    have maintained close contact from the beginning of the project brainstorming. In the process of
                    project
                    exchange, we provided some constructive suggestions to the FAFU-CHINA team. After many discussions
                    on
                    various issues of the two parties' projects, we finally finalized the respective project directions.
                    Our
                    project is based on the treatment of burn treatment; the FAFU-CHINA team's project involves
                    inserting
                    foreign genes into yeast which acts as the bottom microorganism, to expresses aroma substances.
                    <br>
                    <br>
                    At the beginning of 2021, we met the FAFU-CHINA team. We established a partnership this year, and we
                    have maintained close contact from the beginning of the project brainstorming. In the process of
                    project
                    exchange, we provided some constructive suggestions to the FAFU-CHINA team. After many discussions
                    on
                    various issues of the two parties' projects, we finally finalized the respective project directions.
                    Our
                    project is based on the treatment of burn treatment; the<span style="font-weight: 900;"> FAFU-CHINA
                        team's project involves inserting
                        foreign genes into yeast which acts as the bottom microorganism, to expresses aroma
                        substances.</span>
                </div>

                <img src="https://2021.igem.org/wiki/images/6/62/T--SZPT-CHINA--partnership-pic-13.png"
                    style="margin-top: 70px;width: 700px;margin-left: 234px;"></img>
                <div class="tz">Figure 11. Eleventhly First online communication with FAFU-CHINA on
                    June23，2021
                </div>

                <div class="pb">
                    This was followed by the second online communication. First, we understand the progress of the other
                    party's experiment. Because the data of an experiment we did was not ideal, FAFU-CHINA suggested
                    that we
                    could try to redo the experiment by changing experimental conditions.. In the end, the data became
                    relatively considerable after we redo the experiment. At the same time, FAFU-CHINA has little
                    literatures
                    on light control, so we <span style="font-weight: 900;">provide them with some literatures related
                        to
                        light control. </span></div>

                <img src="https://2021.igem.org/wiki/images/9/95/T--SZPT-CHINA--partnership-pic-14.png"
                    style="margin-top: 70px;width: 700px;margin-left: 234px;"></img>
                <div class="tz">Figure 12. Twelvethly Second online communication with FAFU-CHINA on July
                    9，2021
                </div>

                <div class="pb">
                    After a period of time, we learned that both sides were preparing to conduct a questionnaire survey,
                    so
                    we conducted the third exchange. We <span style="font-weight: 900;">proposed amendments to each
                        other’s
                        questionnaires,</span> hoping to
                    improve the questionnaires from different perspectives. Due to local epidemic problems, the
                    FAFU-CHINA
                    team was unable to stay at school during the summer vacation, which made the FAFU-CHINA team's
                    experimental
                    part stagnant.<span style="font-weight: 900;"> We suggested that FAFU-CHINA can first establish a
                        model
                        to shorten the experimental
                        period after returning to school.</span></div>



                <img src="https://2021.igem.org/wiki/images/6/63/T--SZPT-CHINA--partnership-pic-15.png"
                    style="margin-top: 70px;width:700px;margin-left: 234px;"></img>
                <div class="tz">Figure 13. Thirteenthly online communication with FAFU-CHINA on July
                    22, 2021
                </div>

                <div class="pb">
                    On July 26, Our team invited a business expert engaged in business kindness to give us an offline
                    lecture. <span style="font-weight: 900;">Our team shared this offline lecture with our partners
                        FAFU-CHINA online. </span>
                    <br>
                    <a href="https://2021.igem.org/Team:SZPT-CHINA/Inclusivity">(Please click
                        inclusivity for details)</a>
                </div>


                <img src="https://2021.igem.org/wiki/images/c/c7/T--SZPT-CHINA--partnership-pic-16.png"
                    style="margin-top: 70px;width: 700px;margin-left: 234px;"></img>
                <div class="tz">Figure 4. Fourteenthly online communication with FAFU-CHINA on
                    July26, 2021
                </div>

                <div class="pb">
                    Time is like an arrow, and we started the fifth online communication. Although the FAFU-CHINA team
                    was
                    unable to conduct the experiment due to the epidemic, the plan of human practice could not be
                    carried
                    out. Our team proposed an idea about our human practice and <span style="font-weight: 900;">hoped
                        that
                        they
                        can help us with the
                        presentation and dubbing of the picture book. </span>Of course, FAFU-CHINA also has a summer
                    plan
                    for human
                    practice. I hope that our cooperative relationship will get better and better.</div>


                <img src="https://2021.igem.org/wiki/images/4/40/T--SZPT-CHINA--partnership-pic-17.png"
                    style="margin-top: 70px;width: 700px;margin-left: 234px;"></img>
                <div class="tz">Figure 15. Fifteenthly online communication with FAFU-CHINA on August
                    12,2021
                </div>

                <div class="pb">
                    On September 19, our sixth exchange came after more than a month. As the first exchange after the
                    semester, we asked the FAFU-CHINA team about the progress of the experiment and expressed our
                    greetings
                    to our partners. At the same time, near the end of the competition, we also <span
                        style="font-weight: 900;">discussed the writing of
                        Wiki content.</span></div>

                <img src="https://2021.igem.org/wiki/images/3/3a/T--SZPT-CHINA--partnership-pic-18.png"
                    style="margin-top: 70px;width: 700px;margin-left: 234px;"></img>
                <div class="tz">Figure 16. Sixteenthly online communication with FAFU-CHINA on September 19, 2021
                </div>


                <!-- <img src="https://2021.igem.org/wiki/images/d/d0/T--SZPT-CHINA--partnership-pic-19.png"
                    style="margin-top: 70px;width: 1000px;margin-left: 100px;"></img> -->


            </div>
            <div id="red"
                style="float: left;margin-left: 140px; height: 18500px;width: 55px;background-color: #d44225;">
            </div>
        </div>
        <image src="https://2021.igem.org/wiki/images/8/8d/T--SZPT-CHINA--bottomPic.png" class="pic"
            style="margin-top: -372px;width: 1920px;"></image>

    </div>
</body>


<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
        //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        document.getElementById('content').style =
            `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function () {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio +
                ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            //document.getElementById('mainImg').style = "margin-top:45px";
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 3100;
            mainClass.add('pc');
            mainClass.remove('large');

            var value = document.getElementById('blue').getAttribute("style")
            value = value.replace(/18500/, "23500")
            $("#blue").attr("style", value);

            var value = document.getElementById('red').getAttribute("style")
            value = value.replace(/18500/, "23500")
            $("#red").attr("style", value);

            //手机适配目录
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir1").attr("style", value);
            //适配top
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/3vh/, "1vh")
            $("#dir1").attr("style", value);

            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir2").attr("style", value);

            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/8vh/, "2vh")
            $("#dir3").attr("style", value);



            var value = document.getElementById('dir0p').getAttribute("style")
            value = value.replace(/1.8rem/, "1.3rem")
            $("#dir0p").attr("style", value);

            var value = document.getElementById('dir1p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir1p").attr("style", value);

            var value = document.getElementById('dir2p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir2p").attr("style", value);

            var value = document.getElementById('dir3p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir3p").attr("style", value);




            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 930;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
        // 是移动设备 展示移动设备页
        //document.getElementById('main').style = 'display:none'
        //document.getElementsByClassName('mobile')[0].style = 'display:flex'
        // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function () {
        init()
    }, false);
</script>
<!-- END-适配 -->





</html>